<template>
    <a-layout class="layout">
        <a-layout-sider breakpoint="lg" collapsed-width="0">
            <div class="logo" />
            <AMenu @openChange="handleOpen" theme="dark" mode="inline" v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys">
                <AMenuItem
                    @click="
                        $router.push({ path: '/admin/dashboard' });
                        state.openKeys = [];
                    "
                    key="/admin/dashboard"
                >
                    <span class="nav-text">面板</span>
                </AMenuItem>
                <ASubMenu v-for="subMenu in state.menus" :key="subMenu._id" :title="subMenu.module_name">
                    <AMenuItem @click="$router.push({ path: menu.url })" v-for="menu in subMenu.children" :key="menu.url">
                        <span class="nav-text">{{ menu.action_name }}</span>
                    </AMenuItem>
                </ASubMenu>
            </AMenu>
        </a-layout-sider>
        <a-layout class="rightLayout">
            <a-layout-header :style="{ background: '#fff', padding: 0 }">
                <ARow type="flex">
                    <ACol flex="auto"></ACol>
                    <ACol flex="200px">
                        <a-dropdown>
                            <div class="dropDownContent">
                                <AAvatar :src="state.userInfo && `${baseUrl}${state.userInfo.avatar}`">
                                    <template v-if="!state.userInfo || !state.userInfo.avatar" #icon><UserOutlined /></template>
                                </AAvatar>
                                <a class="ant-dropdown-link" @click.prevent>
                                    你好，{{ (state.userInfo && state.userInfo.username) || "管理员" }}~
                                    <DownOutlined />
                                </a>
                            </div>

                            <template #overlay>
                                <a-menu>
                                    <a-menu-item @click="logout"> 退出登录 </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </ACol>
                </ARow>
            </a-layout-header>
            <a-layout-content class="layoutWrapper">
                <div class="layoutContent"><router-view /></div>
            </a-layout-content>
            <a-layout-footer style="text-align: center"> Ant Design ©2018 Created by Ant UED </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script>
export default defineComponent({});
</script>

<script setup>
import { getMenuApi } from "@/api/access";
import { logoutApi } from "@/api/user";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { reactive } from "@vue/reactivity";
import { computed, defineComponent, watch } from "@vue/runtime-core";
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
const store = useStore();
const state = reactive({
    userInfo: computed(() => store.state.userInfo),
    openKeys: [],
    selectedKeys: [],
    menus: computed(() => store.state.menus),
});
const logout = () => {
    logoutApi().then(res => {
        if (res.code === 200) {
            message.success("退出登录成功");
            router.push({ path: "/login" });
        }
    });
};

const initMenuKeys = () => {
    if (route.path === "/admin/dashboard") return (state.selectedKeys = ["/admin/dashboard"]);
    store.state.menus.forEach(item => {
        if (item.children) {
            item.children.forEach(item1 => {
                if (route.path === item1.url) {
                    state.openKeys = [item._id];
                    state.selectedKeys = [item1.url];
                }
            });
        }
    });
};
watch(
    () => route,
    (newV) => {
        initMenuKeys()
    },
    {
        immediate: true,
        deep: true
    }
);
const handleOpen = openKeys => {
    state.openKeys = [openKeys[openKeys.length - 1]];
};
const baseUrl = process.env.VUE_APP_BASEURL;
</script>

<style scoped lang="scss">
.layout {
    height: 100vh;
    .rightLayout {
        display: flex;
        flex-direction: column;
        .dropDownContent {
            display: flex;
            align-items: center;
            .ant-dropdown-link {
                margin-left: 6px;
            }
        }
        .layoutWrapper {
            margin: 24px 16px 0;
            .layoutContent {
                overflow: scroll;
                flex: 1;
                padding: 24px;
                background: #fff;
                height: 100%;
            }
        }
    }
}
</style>
